<template>
    <h4>普通</h4>
    <a-table
        :headerList="[
            { name: 'id', text: 'Id', width: 20 },
            { name: 'parentId', text: '父级Id', width: 20 },
            { name: 'name', text: '名称', width: 20 },
            { name: 'oper', text: '操作', width: 20 },
            { name: 'oper1', text: '操作1', width: 20 },
        ]"
        :dataList="cateItems"
        :selectable="true"
        :getCanBeSelectedFunc="(a) => a.id != 1 && a.id != 3"
        v-model:value="cates"
    >
        <template v-slot:data-oper="{ data }">
            <a-dropdown-button-group :displayCount="2">
                <a-input-switch
                    :color="'primary'"
                    :size="'s'"
                    :value="data.id > 0"
                ></a-input-switch>

                <template v-slot:moreBtn>
                    <a-button :square="true" :color="'default'" :size="'s'">
                        <span class="fa fa-ellipsis-h"></span>
                    </a-button>
                </template>
            </a-dropdown-button-group>
        </template>
        <template v-slot:data-oper1>
            <a-dropdown-button-group :displayCount="2">
                <a-button :color="'primary'" :size="'s'">Click</a-button>

                <template v-slot:moreBtn>
                    <a-button :square="true" :color="'default'" :size="'s'">
                        <span class="fa fa-ellipsis-h"></span>
                    </a-button>
                </template>
            </a-dropdown-button-group>
        </template>
    </a-table>
    <h4>没有数据</h4>
    <a-table
        :headerList="[
            { name: 'id', text: 'Id', width: 20 },
            { name: 'parentId', text: '父级Id', width: 20 },
            { name: 'name', text: '名称', width: 20 },
        ]"
        :dataList="cateItems1"
        :selectable="false"
        v-model:value="cates"
        :maxHeight="300"
    >
    </a-table>
    <div class="c-m-t-m">
        <a-button @click="cateItems1 = [...cateItems]">加载数据</a-button>
    </div>
    <h4>指定最高高度</h4>
    <a-table
        :headerList="[
            { name: 'id', text: 'Id', width: 20 },
            { name: 'parentId', text: '父级Id', width: 20 },
            { name: 'name', text: '名称', width: 20 },
        ]"
        :dataList="cateItems"
        :selectable="true"
        v-model:value="cates"
        :maxHeight="300"
    ></a-table>
</template>

<script>
export default {
    data() {
        return {
            colors: [
                'default',
                'primary',
                'secondary',
                'success',
                'warning',
                'error',
            ],
            sizes: ['xs', 's', 'm', 'l', 'xl'],
            name: 'zhang',
            age: 1,
            password: '',
            checked: false,
            fav: null,
            favs: [],
            favItems: [
                { text: '香蕉', value: 1 },
                { text: '苹果', value: 2 },
                { text: '梨子', value: 3 },
                { text: '葡萄', value: 4, disabled: true },
            ],
            popupAlignments: ['top-left', 'top-middle', 'top-right', 'middle-left', 'middle-middle', 'middle-right', 'bottom-left', 'bottom-middle', 'bottom-right'],
            cateItems: [
                { id: 1, parentId: null, name: '面包蛋糕' },
                { id: 2, parentId: null, name: '麻辣食品', disabled: true },
                { id: 3, parentId: null, name: '膨化食品' },

                { id: 4, parentId: 1, name: '面包' },
                { id: 5, parentId: 1, name: '蛋糕' },
                { id: 6, parentId: 1, name: '三明' },

                { id: 7, parentId: 2, name: '豆干' },
                { id: 8, parentId: 2, name: '辣条' },
                { id: 9, parentId: 2, name: '凤爪' },

                { id: 10, parentId: 4, name: '面包商品1' },
                { id: 11, parentId: 4, name: '面包商品2' },
                { id: 12, parentId: 4, name: '面包商品3', disabled: true },
            ],
            cate: null,
            cates: [],
            badgeCount: 1,
            dotOnly: true,
            startTime: new Date(),
            cateItems1: [],
            selectable: true,
        }
    },
}
</script>